import Taro, { Current } from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'

import CTopbar from '../../../components/CTopBar/index'
import CorderCard from '../../../components/CorderCard/index'
import { get_my_evaluation } from './service'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import './index.scss'
import { pay_api } from '@/pages/Pay/service'

/**
 * 我的测评界面
 */
class MyEvaluation extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      current: 0,
      EvaluationData: [],
      pageNum: 1,
      pageSize: 20,
    }
  }
  //WARNING! To be deprecated in React v17. Use componentDidMount instead.
  componentWillMount() {
    // tabType  0,1
    const tabType = Number(Current.router?.params.tabType || 0)

    this.setState(
      {
        current: tabType,
      },
      () => {
        this.get_evaluation_data()
      },
    )
  }
  // 获取数据
  get_evaluation_data() {
    const { current, pageSize, pageNum, EvaluationData } = this.state
    const params = {
      type: current,
      pageSize,
      pageNum,
    }
    get_my_evaluation(params).then(({ result, data }) => {
      const arr = Array.from(data)
      this.setState({
        EvaluationData: EvaluationData.concat(...arr),
      })
    })
  }
  handleClick(value) {
    this.setState(
      {
        EvaluationData: [],
        pageNmu: 1,
        current: value,
      },
      () => {
        this.get_evaluation_data()
      },
    )
  }

  onReachBottom() {
    const { pageNum } = this.state
    this.setState(
      {
        pageNum: pageNum + 1,
      },
      () => {
        this.get_evaluation_data()
      },
    )
  }

  render() {
    const { current, EvaluationData } = this.state
    const tabList = [{ title: '未完成' }, { title: '已完成' }]
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='我的测评' showBack></CTopbar>
        </View>
        <View className='content_3'>
          <AtTabs current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
            {tabList.map((c, i) => {
              return (
                <AtTabsPane current={current} index={i} key={i}>
                  <View style='background-color: #FAFBFC;text-align: center; padding-top:20px'>
                    {EvaluationData.length === 0 ? (
                      <View style='color:#8c8c8c'>暂无数据...</View>
                    ) : (
                      EvaluationData.map((item, index) => {
                        return (
                          <View key={index}>
                            <CorderCard key={index} data={item} tabstatus={i} type={1} />
                          </View>
                        )
                      })
                    )}
                  </View>
                </AtTabsPane>
              )
            })}
          </AtTabs>
        </View>
      </View>
    )
  }
}

export default MyEvaluation
